<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@include file="/pageRc/common/common.jsp"%>

<!DOCTYPE html>
<html lang="en" style="overflow-x: hidden">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-tap-highlight" content="no">

<link rel="stylesheet" href="<%=commonPath %>/pageRc/layui/css/layui.css" media="all">
<link rel="stylesheet" href="<%=commonPath %>/pageRc/css/manlogin/admin.css" media="all">
<link rel="stylesheet" href="<%=commonPath %>/pageRc/css/manlogin/login.css" media="all">
<link id="layuicss-layer" rel="stylesheet" href="<%=commonPath %>/pageRc/css/manlogin/layer.css" media="all">
<link rel="stylesheet" href="<%=commonPath %>/pageRc/css/manlogin/layui.css" media="all">
<script type="text/javascript" src="<%=commonPath %>/pageRc/js/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="<%=commonPath %>/pageRc/layui/layui.js"></script>
<script type="text/javascript" src="<%=commonPath %>/pageRc/common/utils.js"></script>
<script type="text/javascript" src="<%=commonPath %>/pageRc/common/msgTool.js"></script>
<script type="text/javascript" src="<%=commonPath %>/pageRc/common/echarts.min.js"></script>
<title>数据统计图</title>
<style type="text/css">
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#showGraphic,#showGraphic2{
 width: 1080px;height:300px; margin:50px 50px 10px 50px; float:left;
}
.iaw{
 float:left;
}
.reportimg{
   width: 90px;height:80px;margin:20px 95px ;
}
.reportword{
   margin:10px 85px 10px 85px ;
}
.layui-btn{
  width: 200px; margin-left: 200px;
}
.layui-btn+.layui-btn{
 margin-left:430px;
}
</style>
 
<script type="text/javascript">
window.onload=function()
 {
	var path="<%=commonPath%>";
	var dataObj = {
				"proGroupNo" : $("#proGroupNo").val()
			}
    var _msgObj = JSON.stringify({"head":{},"body":dataObj});
    	
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url :path+ "/page/need/SelectFourData.do",    //请求发送到TestServlet处
            data : _msgObj,
            dataType : "json",        //返回数据形式为json
            success : function(result) {
          	  var data=result.body;
              $("#curMonthGoal").html(data[0]+"万");
              $("#balance").html(data[1]+"万");
              $("#good").html(data[2]);
              $("#bad").html(data[3]);
            /*   if(data[2].length>7){
            	  $("#good").html(data[2].substring(0,7)+"..."); 
              }else{
            	  $("#good").html(data[2]);
              }
              
              if(data[3].length>7){
            	  $("#bad").html(data[3].substring(0,7)+"..."); 
              }else{
            	  $("#bad").html(data[3]);
              } */
              
              
           }
       })
 }

var myTextStyle = {
 color: "#0000AA",//文字颜色
 fontStyle: "normal",//italic斜体  oblique倾斜
 fontWeight: "normal",//文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
 fontFamily: "sans-serif",//字体系列
 fontSize: 18 //字体大小
};
 
</script>
</head>
<body>
<c:forEach items="${groupList}" var="group">
<input type="hidden" id="proGroupNo" value="${group.proGroupNo}">
</c:forEach>
<div class="layui-row">
		<div class="iaw">
		<img src="<%=commonPath %>/pageRc/imgs/report/1.png" class="reportimg"/>
		<h5 class="reportword">本月营收目标:<strong id="curMonthGoal" style="color: red;"></strong></h5>
		</div>
		<div class="iaw">
		<img src="<%=commonPath %>/pageRc/imgs/report/2.png" class="reportimg"/>
		<h5 class="reportword">距目标差额:<strong id="balance" style="color: red;"></strong></h5>
		</div>
		<div class="iaw">
		<img src="<%=commonPath %>/pageRc/imgs/report/3.png" class="reportimg"/>
		<h5 class="reportword">目标超额项目组数量:<strong id="good" style="color: red;"></strong></h5>
		</div>
		<div class="iaw">
		<img src="<%=commonPath %>/pageRc/imgs/report/4.png" class="reportimg"/> 
		<h5 class="reportword">滞后项目组数量:<strong id="bad" style="color: red;"></strong></h5>
		</div>	
</div>			
			
		
		<div id="showGraphic" ></div>
		<div id="showGraphic2"></div>

		<script type="text/javascript">
		var path="<%=commonPath%>";
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('showGraphic'));
                        // 指定图表的配置项和数据
              option = {
                    title : {
                         text: '团队营收情况'
                         /*subtext: '',
                        backgroundColor: '#ABABAB', //标题的背景颜色
                        textStyle: myTextStyle,//标题样式
                        subtextStyle: myTextStyle //小标题样式 */
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['目标营收','实际营收']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            name:'日期',
                            data :[] /* ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] */
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            name:'收入(万元)'
                        }
                    ],
                    series : [
                        {
                            name:'目标营收',
                            type:'line',
                            data:[],/* [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], */
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name:'实际营收',
                            type:'line',
                            data:[],/* [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], */
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name : '平均值'}
                                ]
                            }
                        }
                    ]
                };
              myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
              var moths=[];    //类别数组（实际用来盛放X轴坐标值）
              var realitys=[];    //实际营收数组（实际用来盛放Y坐标值）
              var goals=[];       //目标营收数组 
              var dataObj = {
    				"proGroupNo" : $("#proGroupNo").val()
    			}
              var _msgObj = JSON.stringify({"head":{},"body":dataObj});
          	
              $.ajax({
                  type : "post",
                  async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                  url :path+ "/page/need/selectGoalAndReality.do",    //请求发送到TestServlet处
                  data : _msgObj,
                  dataType : "json",        //返回数据形式为json
                  success : function(result) {
                	  var data=result.body;
                             for(var i=0;i<data.length;i++){       
                            	 moths.push(data[i].months);    //挨个取出类别并填入类别数组
                            	 if(data[i].goal==null){
                            		 goals.push(0);
                            	 }else{
                            	     goals.push(data[i].goal);    //挨个取出销量并填入销量数组
                            	 }
                            	 if(data[i].ysx==null){
                            		 realitys.push(0);
                            	 }else{
                            	 realitys.push(data[i].ysx);    //挨个取出销量并填入销量数组
                            	 }
                              }
                             myChart.hideLoading();    //隐藏加载动画
                             myChart.setOption({        //加载数据图表
                                 xAxis: {
                                     data: moths
                                 },
                                 series: [{
                                     // 根据名字对应到相应的系列
                                     name: '目标营收',
                                     data: goals
                                 },{
                                     name: '实际营收',
                                     data: realitys
                                 }]
                             });
                             
                      
                  
                 },
                  error : function(errorMsg) {
                      //请求失败时执行该函数
                  alert("图表请求数据失败!");
                  myChart.hideLoading();
                  }
             })
                        
                        
             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
    </script>
                    
	
        
        <script type="text/javascript">
        var path="<%=commonPath%>";
     // 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('showGraphic2'));
        option2 = {
        	    title : {
        	         text: '项目组营收情况'
       	        	 /*backgroundColor: '#ABABAB', //标题的背景颜色
                     textStyle: myTextStyle,//标题样式
                     subtextStyle: myTextStyle //小标题样式 */
        	    },
        	    tooltip : {
        	        trigger: 'item',
        	        formatter: "{a} <br/>{b} : {c} ({d}%)"
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        left: 'right',
        	        data: []
        	    },
        	    toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: false},
                       // magicType : {show: true, type: ['line', 'bar']},
                        //restore : {show: true},
                        saveAsImage : {show: true},
                        dataZoom: {//数据缩放视图 
                        	show: false},
                        mark: {show: false}
                    }
                },
        	    series : [
        	        {
        	            name: '实际营收总和',
        	            type: 'pie',
        	            radius : '55%',
        	            center: ['50%', '60%'],
        	            data:[],
        	            itemStyle: {
        	                emphasis: {
        	                    shadowBlur: 10,
        	                    shadowOffsetX: 0,
        	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        	                }
        	            }
        	        }
        	    ]
        	};
        
        myChart2.showLoading();    //数据加载完之前先显示一段简单的loading动画
        var dataObj = {
				"proGroupNo" : $("#proGroupNo").val()
			}
        var _msgObj = JSON.stringify({"head":{},"body":dataObj});
        
         $.ajax({
        	        type : "post",
		            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
		            url :path+ "/page/need/selectAllTeamIncome.do",   
		            data : _msgObj,
		            dataType : "json",        //返回数据形式为json
        	        success: function(result) {
				    	  var data=result.body;
        	                 var names=[];//定义两个数组
        	                  var nums=[];
        	                  $.each(data,function(key,values){ //此处我返回的是list<String,map<String,String>>循环map
        	                      names.push(values.proTeamName);
        	                      var obj = new Object();
        	                      obj.name = values.proTeamName;
        	                      obj.value = values.teamIncome;
        	                      nums.push(obj);
        	                   });
        	                myChart2.hideLoading();    //隐藏加载动画
        	                myChart2.setOption({ //加载数据图表
        	                          legend: {
        	                                data: names
        	                               },
        	                        series: {
        	                                // 根据名字对应到相应的系列
        	                                name: ['实际营收总和'],
        	                                data: nums
        	                                }    
        	           });
        	           },
        	            error : function(errorMsg) {
			                //请求失败时执行该函数
			                alert("图表请求数据失败!");
			                myChart2.hideLoading();
		                }
        	       });
       
        
     // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);
     
        </script>
        
</body>
</html>
